import Vue from "vue";
import VueRouter from "vue-router";
import Login from "../views/Login/index.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: "/login",
  },
  {
    path: "/login", //登录页
    name: "login",
    component: Login,
  },
  {
    path: "/home", // 左侧菜单栏
    name: "home",
    redirect: "/welcome",
    meta: {
      auth: true,
    },
    component: () => import("../views/Home"),
    children: [
      {
        path: "/welcome", //进入欢迎页
        name: "welcome",
        component: () => import("../views/Home/Welcome"),
      },
      // {
      //   path: "/users", //用户列表
      //   name: "users",
      //   component: () => import("../views/Home/Users"),
      // },
      // {
      //   path: "/roles", //角色列表
      //   name: "roles",
      //   component: () => import("../views/Home/Rights/roles.vue"),
      // },

      // {
      //   path: "/rights", //权限列表
      //   name: "rights",
      //   component: () => import("../views/Home/Rights/rights.vue"),
      // },
      // {
      //   path: "/goods", //商品列表
      //   name: "goods",
      //   component: () => import("../views/Home/Goods/GoodsList.vue"),
      // },
      // {
      //   path: "/add", //商品列表
      //   name: "add",
      //   component: () => import("../views/Home/Goods/GoodsAdd.vue"),
      // },
      // {
      //   path: "/params", //分类参数
      //   name: "params",
      //   component: () => import("../views/Home/Goods/Goodsparams.vue"),
      // },
      // {
      //   path: "/categories", //商品分类
      //   name: "categories",
      //   component: () => import("../views/Home/Goods/Goodscategories.vue"),
      // },
      // {
      //   path: "/reports", //数据统计
      //   name: "reports",
      //   component: () => import("../views/Home/Reports"),
      // },
    ],
  },

  // 指定义指令
  {
    path: "/menu",
    name: "Menu",
    component: () => import("@/views/Menu.vue"),
  },
];

const router = new VueRouter({
  routes,
});

import { fn } from "@/utils/routeList.js"; //把生成列表路由放到公共方法里
// //生成动态路由-登录后获取到路由列表，调用递归函数通过router.addRoute('路由里name名',值)生成动态路由
console.log("路由先走");
function loadRoute() {
  let token = sessionStorage.getItem("token");
  let getMenusApi = JSON.parse(sessionStorage.getItem("getMenusApi"));
  //注意此处是登录后,有了左侧导航数据，再进行路由表动态加载
  if (token && getMenusApi) {
    let newList = fn(getMenusApi);
    console.log("路由表结构", newList);
    newList.forEach((item) => {
      router.addRoute("home", item);
    });
  }
}
//!!!注意此处在次调用1次动态路由,为了防止登录后跳转其它页面,刷新页面找不到问题。第2点注意，要在路由实例化后调用执行。
loadRoute();

// router.beforeEach((to, form, next) => {
//   console.log(to, "111");
//   console.log(form, "2222");
//   const flag = to.matched.some((item) => item.meta.auth);
//   if (flag) {
//     //需要鉴权
//     const token = sessionStorage.getItem("token");
//     if (!token) {
//       //如果没有token跳转login
//       return next( to.path=="/login" );
//     }
//     //如果有token，放行
//     next();
//   }
//   next();
// });
router.beforeEach((to, from, next) => {
  if (!sessionStorage.getItem("token") && to.path !== "/login") {
    next("/login");
  } else {
    next();
  }
});
export default router;
